<template>
  <div>
    <van-nav-bar
      title="提交订单"
      left-text="返回"
      left-arrow
      @click-left="goBack"
    />
    <van-password-input
      :value="value"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <!-- 数字键盘 -->
    <van-number-keyboard
      v-model="value"
      :show="showKeyboard"
      @blur="showKeyboard = true"
    />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { Toast } from 'vant'
export default defineComponent({
  data() {
    return {
      value: '',
      showKeyboard: true
    }
  },
  methods: {
    goBack() {
      this.$router.push({ name: 'foodcar' })
    }
  },
  watch: {
    value(newVal, oldVal) {
      if (newVal.length === 6) {
        console.log(oldVal)
        Toast.success('支付成功')
        setTimeout(() => {
          this.$router.push({ name: 'foodcar' })
        }, 1000)
      }
    }
  }
})
</script>
<style lang="scss" scoped>
.van-nav-bar {
  background-color: #ffd614;
}
</style>
